<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="popUpBox" v-show="modelShow">
		<uni-transition style="width: 100%; height: 100%;" :mode-class="['zoom-in']" :show="modelShow">
			<view class="popUpBoxCneter">
				<view class="popUpBoxCneterImg"><image style="width: 100%; height: 100%;" :src="imgUrl" mode=""></image></view>
				<view class="popUpBoxCneterBottom">
					<checkbox-group @change="checkShow">
						<checkbox value="select" :checked="select" style="transform:scale(0.7)" />
						{{ this.$t('homeBox.ctwfont27') }}
					</checkbox-group>
				</view>
			</view>
		</uni-transition>
		<view class="closeBox"><icon @tap="close" color="#fff" type="clear" size="36" /></view>
	</view>
</template>

<script>
import baseFont from '@/utils/baseFont.js';
import { getStorage, setStorage } from '@/utils/setStorage.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			imgUrl: '',
			modelShow: false,
			select: false
		};
	},
	computed: {
		dialogType() {
			return this.$store.state.dialogType;
		}
	},
	watch: {
		dialogType(val) {
			if (val == 2) {
				this.getPopUp();
			}
		}
	},
	mounted() {},
	methods: {
		// 获取广告
		async getPopUp() {
			const params = {
				number: 'advertisement', // phone
				count: 1,
				sort: 2
			};
			const { data: res } = await this.$http(true, 'api/advertise/adDialog', params, 'GET');
			if (res.errno === 0) {
				if (res.data) {
					const obj = res.data;
					let timestamp1 = Date.parse(new Date());
					if (getStorage('popUpTwoPermanentShow') != obj.image && !getStorage('popUpTwoShow') && timestamp1 > obj.beginDate && timestamp1 < obj.endDate) {
						if (obj.image) {
							this.imgUrl = obj.image;
							this.modelShow = true;
						}
					} else {
						if (this.$store.state.dialogType) {
							this.$store.state.dialogType = 3;
						}
					}
				} else {
					if (this.$store.state.dialogType) {
						this.$store.state.dialogType = 3;
					}
				}
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
				if (this.$store.state.dialogType) {
					this.$store.state.dialogType = 3;
				}
			}
		},
		close() {
			this.modelShow = false;
			if (this.select) {
				setStorage('popUpTwoPermanentShow', this.imgUrl);
			}
			setStorage('popUpTwoShow', 'close');
			this.$store.state.dialogType = 3;
		},
		checkShow(e) {
			this.select = !this.select;
		}
	}
};
</script>

<style lang="scss" scoped>
.popUpBox {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	.popUpBoxCneter {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 90%;
		height: 760rpx;
		transform: translate(-50%, -50%);
		border-radius: 10px;
		overflow: hidden;
		.popUpBoxCneterImg {
			width: 100%;
			height: 660rpx;
		}
		.popUpBoxCneterBottom {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			font-size: $uni-font-size-custom-g;
		}
	}
	.closeBox {
		position: absolute;
		bottom: 17%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
</style>
